<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>Tab切换插件</title>
    <link rel="stylesheet" href="../css/bootstrap.css"/>
    <script type="text/javascript" src="../js/jquery-2.0.3.js"></script>
    <script type="text/javascript" src="../js/jquery-lzyTab.js"></script>
</head>
<body>
<div id="myTabs" style="width:500px;height:200px;margin:0 auto;">

    <!-- Nav tabs -->
    <ul class="nav nav-tabs" role="tablist">
        <li role="presentation" class="active"><a href="#home" aria-controls="home" role="tab" data-toggle="tab">Home</a></li>
        <li role="presentation"><a href="#profile" aria-controls="profile" role="tab" data-toggle="tab">Profile</a></li>
        <li role="presentation"><a href="#messages" aria-controls="messages" role="tab" data-toggle="tab">Messages</a></li>
        <li role="presentation"><a href="#settings" aria-controls="settings" role="tab" data-toggle="tab">Settings</a></li>
    </ul>

    <!-- Tab panes -->
    <div class="tab-content">
        <div role="tabpanel" class="tab-pane active" id="home">1的内容</div>
        <div role="tabpanel" class="tab-pane" id="profile">2的内容</div>
        <div role="tabpanel" class="tab-pane" id="messages">3的内容</div>
        <div role="tabpanel" class="tab-pane" id="settings">4的内容</div>
    </div>

</div>


</body>
</html>
<script>
    $('#myTabs a').click(function(e){
        e.preventDefault();
        $(this).lzyTab();
    });
</script>